/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */

// 1.1 准备查询参数对象(以接口文档为主)，方便使用，不用一行一行在axios里面写了
//做全局变量，因为以后用户会改变里面的值
const queryObj = {
  status: '',// 文章状态（1-待审核，2-审核通过），空字符串-全部
  channel_id: '',// 文章频道 id，空字符-全部
  page: 1,//当前页码
  per_page: 2//当前页面条数
}
//定义一个关于文章总条数的全局变量，方便用户之后修改，内容发生变化
let totalCount = 0

// 封装函数，形成复用
async function articleList() {
  // 1.2 获取文章列表数据
  const result = await axios({
    url: '/v1_0/mp/articles',
    params: queryObj,
  })
  // console.log(result.data.results)
  // 1.3 展示到指定的标签结构中
  const articleStr = result.data.results.map(item => `
  <tr>
  <td>
  <img src=${item.cover.type === 0 ? `https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500` : item.cover.images[0]} alt="">
  </td>
  <td>${item.title}</td>
  <td>${item.status === 1 ? `<span class="badge text-bg-primary">待审核</span>` : `<span class="badge text-bg-success">审核通过</span> `}
  </td>
  <td>
    <span>${item.pubdate}</span>
  </td>
  <td>
    <span>${item.read_count}</span>
  </td>
  <td>
    <span>${item.comment_count}</span>
  </td>
  <td>
    <span>${item.like_count}</span>
  </td>
  <td  data-id=${item.id}>
    <i class="bi bi-pencil-square edit"></i>
    <i class="bi bi-trash3 del"></i>
  </td>
</tr>
`).join('')
  document.querySelector('.art-list').innerHTML = articleStr

  // 3.1 保存并设置文章总条数
  // console.log(result.data.total_count)

  //注意：局部变量赋值未定义就是全局变量
  totalCount = result.data.total_count
  document.querySelector('.total-count').innerHTML = `共${totalCount}条`
}
//网页运行，默认渲染一次
articleList()


/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */

// 2.1 设置频道列表数据
// 封装函数，形成复用
async function channelList() {
  // 1.1 获取频道列表数据
  const result = await axios({
    url: '/v1_0/channels'
  })
  // console.log(result)
  // console.log(result.data.channels);

  // 1.2 展示到下拉菜单中
  const channelData = result.data.channels
  const channelStr = channelData.map(item => {
    return `<option value=${item.id}>${item.name}</option>`
  }).join('')
  document.querySelector('.form-select').innerHTML = `<option value="" selected="">请选择文章频道</option>` + channelStr
}
// 网页运行后，默认调用一次
channelList()

// 2.2 监听筛选条件改变，保存查询信息到查询参数对象
// 给三个单选按钮绑定改变事件，并将点击到的按钮中的value值保存到queryObj（查询参数对象）中
$('.form-check-input').change(e => {
  //点击的文章状态值
  // console.log(e.target.value);

  //注意：局部变量赋值未定义就是全局变量
  queryObj.status = e.target.value
})

//给频道表单绑定改变事件，并将点击到的按钮中的value值保存到queryObj（查询参数对象）中
$('.form-select').change(e => {
  //点击的文章id值
  // console.log(e.target.value);

  //注意：局部变量赋值未定义就是全局变量
  queryObj.channel_id = e.target.value
})
// 2.3 点击筛选时，传递查询参数对象到服务器
$('.sel-btn').click(() => {
  // 2.4 获取匹配数据，覆盖到页面展示
  articleList()
})

/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */

// 3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.next').addEventListener('click', (e) => {
  //使用Math.ceil()函数向上取整得到总页数，当前页数不得超过总页数
  if (queryObj.page < Math.ceil(totalCount / queryObj.per_page)) {
    queryObj.page++
    document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
    articleList()
  }
})

// 3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.last').addEventListener('click', (e) => {
  //当前页面大于1时才能翻到上一页
  if (queryObj.page > 1) {
    queryObj.page--
    document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
    articleList()
  }
})



/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 删除最后一页的最后一条，需要自动向前翻页
 *  4.5 重新获取文章列表，并覆盖展示
 */
// 4.1 关联文章 id 到删除图标（在文章渲染页面中关联id）

// 4.2 点击删除时，获取文章 id(事件委托)
document.querySelector('.art-list').addEventListener('click', e => {
  if (e.target.classList.contains('del')) {
    //因为id绑定在所点击标签的父元素上，所以要从父元素上获取
    const delId = e.target.parentNode.dataset.id
    // console.log(delId)

    // 4.3 调用删除接口，传递文章 id 到服务器
    axios({
      url: `/v1_0/mp/articles/${delId}`,
      method: 'delete'
    })
    // 4.4 删除最后一页的最后一条，需要自动向前翻页
    const children = document.querySelector('.art-list').children
    // console.log(children);
    if (children.length === 1 && queryObj.page !== 1) {
      queryObj.page--
      document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
    }
    // 4.5 重新获取文章列表，并覆盖展示
    articleList()
  }
})

// 4.1 页面跳转传参（URL 查询参数方式）
// 点击编辑时，获取文章 id(事件委托)，跳转到发布文章页面传递文章 id 过去
document.querySelector('.art-list').addEventListener('click', async e => {
  if (e.target.classList.contains('edit')) {
    //因为id绑定在所点击标签的父元素上，所以要从父元素上获取
    const editId = e.target.parentNode.dataset.id
    // console.log(editId)

    //将指定的文章通过该id跳转到发布文章页面
    location.href = `../publish/index.html?id=${editId}`
  }
})
